import React, {Component} from 'react' 
import {Redirect,Route,Switch} from 'react-router-dom'
import memoryUtils from '../../utils/memoryUtils.js'
import { Layout,Button,Icon} from 'antd'
import Header from '../../components/header';
import LeftNav from '../../components/left_nav'
import Home from '../home'
import Category from '../category'
import Goods from '../goods'
import Bar from '../charts/bar.js'
import Line from '../charts/line.js'
import Pie from '../charts/pie.js'
import Role from '../role'
import User from '../user'
import './admin.less'


const {  Footer, Sider, Content } = Layout;

class Admin extends  Component{
  
  state = {
    collapsed: false,
  };

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed
    })
    
   };

 render(){
   if(!memoryUtils.user || !memoryUtils.user._id){
     return <Redirect to='/login'/>
   }
  return (
<div style={{height:'100%'}}>
     <Layout style={{height:'100%'}}>
     <Button type="primary" onClick={this.toggleCollapsed}  className={this.state.collapsed ? 'ant-btn-col' : 'ant-btn-primary1'}>
        <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
      </Button>
        <Sider
          trigger={null} 
          collapsible
          collapsed={this.state.collapsed}
         >
          <LeftNav collapsed={this.state.collapsed}/>
        </Sider>
        <Layout>
          <Header />
          <Content style={{ margin:'20px', backgroundColor:'#fff'}}>
          <Switch>
             <Route path='/home' component={Home}/> 
              <Route path='/category' component={Category}/> 
            <Route path='/goods' component={Goods}/>
            <Route path='/role' component={Role}/>
              <Route path='/user' component={User}/> 
              <Route path='/charts/bar' component={Bar}/> 
              <Route path='/charts/line' component={Line}/> 
              <Route path='/charts/pie' component={Pie}/> 
            <Redirect to='/home' /> 
          </Switch> 
          
      
          </Content>
          <Footer style={{textAlign:'center', color:"#ccc"}}>推荐使用谷歌浏览器， 可以获得更佳页面操作体验</Footer>
        </Layout>
      </Layout>
</div>
  );
 }
 
}

export default Admin;